/**
 * 流程图解析
 */

import Theme from '../helper/Theme.js';

// 亮色主题的配置
let optionsLight = {
  "x": 0,
  "y": 0,
  "line-width": 3,
  "line-length": 50,
  "text-margin": 10,
  "font-size": 14,
  "font-color": "black",
  "line-color": "black",
  "element-color": "black",
  "fill": "white",
  "yes-text": "yes",
  "no-text": "no",
  "arrow-end": "block",
  "symbols": {
    "start": {
      "font-color": "black",
      "element-color": "black",
      "fill": "white"
    },

    "end": {
      "class": "end-element"
    }
  },
  "flowstate": {
    "past": {
      "fill": "#CCCCCC",
      "font-size": 12
    },

    "current": {
      "fill": "black",
      "font-color": "white",
      "font-weight": "bold"
    },
    "future": {
      "fill": "white"
    },
    "request": {
      "fill": "blue"
    },
    "invalid": {
      "fill": "#444444"
    },
    "approved": {
      "fill": "#58C4A3",
      "font-size": 12,
      "yes-text": "APPROVED",
      "no-text": "n/a"
    },
    "rejected": {
      "fill": "#C45879",
      "font-size": 12,
      "yes-text": "n/a",
      "no-text": "REJECTED"
    }
  }
};

// 暗色主题的配置
let optionsDark = {
  "x": 0,
  "y": 0,
  "line-width": 3,
  "line-length": 50,
  "text-margin": 10,
  "font-size": 14,
  "font-color": "white",
  "line-color": "white",
  "element-color": "white",
  "fill": "black",
  "yes-text": "yes",
  "no-text": "no",
  "arrow-end": "block",
  "symbols": {
    "start": {
      "font-color": "white",
      "element-color": "white",
      "fill": "black"
    },

    "end": {
      "class": "end-element"
    }
  },
  "flowstate": {
    "past": {
      "fill": "#CCCCCC",
      "font-size": 12
    },

    "current": {
      "fill": "white",
      "font-color": "black",
      "font-weight": "bold"
    },
    "future": {
      "fill": "black"
    },
    "request": {
      "fill": "blue"
    },
    "invalid": {
      "fill": "#444444"
    },
    "approved": {
      "fill": "#58C4A3",
      "font-size": 12,
      "yes-text": "APPROVED",
      "no-text": "n/a"
    },
    "rejected": {
      "fill": "#C45879",
      "font-size": 12,
      "yes-text": "n/a",
      "no-text": "REJECTED"
    }
  }
};


export default {
  render: ($dom, theme = '') => {
    $dom.find('.markdown-body-flowchart').each(function() {
      let $this = $$(this);

      // 保存流程图内容到 data 属性中
      let text = $this.data('flowchart-text');
      if (!text) {
        text = $this.text();
        $this.data('flowchart-text', text);
      }

      $this.html('');

      // 获取主题
      let options;
      if (theme === 'dark') {
        options = optionsDark;
      } else if (theme === 'light') {
        options = optionsLight;
      } else {
        options = Theme.isDark() ? optionsDark : optionsLight;
      }

      // 生成流程图
      let diagram = flowchart.parse(text);
      diagram.drawSVG(this, options);
    });
  }
}